<template>
  <div class="orderDetails">
    <div class="head">
      <van-field
        class="title"
        label
        left-icon="arrow-left"
        input-align="center"
        :value="title"
        @click-left-icon="goBack"
        readonly
      />

    </div>
    <div class="item">
      <div class="base">
        <van-cell :title=traceList.pickNumber>

          <template>
            <van-button
              size="mini"
              type="info"
            >{{traceList.waybillNumber}}</van-button>
            <span class="time">{{traceList.receivePieceTime}}</span>
          </template>
        </van-cell>
        <div class="itemContent">
          <div class="startCity">
            <span class="title">{{traceList.shipMember}}</span>
            <span class="city">{{traceList.shipCityName}}</span>
          </div>

          <StateOrder :stateId=traceList.status></StateOrder>
          <div class="endCity">
            <span class="title">{{traceList.receiveMember}}</span>
            <span class="city">{{traceList.receiveCityName}}</span>
          </div>
        </div>
      </div>

    </div>
    <div class="shipment_Information">
      <van-cell
        class="title"
        title="Shipment Information"
      />
      <div class="content">

        <van-cell
          class="postMan"
          title="Post Man"
          :value=traceList.receiveEmployee
        />
        <van-cell
          class="mainStyle"
          title="Branch"
          :value=traceList.branch
        />
        <van-cell
          class="mainStyle"
          title="Waybill"
          :value=traceList.waybillNumber
        />

      </div>
      <div class="shipment_Record">
        <van-cell
          class="title"
          title="Shipment Record"
        />
        <van-steps
          class="step"
          direction="vertical"
          :active=step
        >
          <van-step class="step_head">
            <h3>{{firstStep.description}}</h3>
            <p>{{firstStep.updateTime}}</p>
          </van-step>

          <!-- traceContent -->

          <van-step
            v-for="(item,index) in traceContent"
            :key=index
            class="step_head"
          >
            <h3>{{item.description}}</h3>
            <p>{{item.updateTime}}</p>
          </van-step>

          <van-step class="step_end">
            <h3>{{finalStep.description}}</h3>
            <p>{{finalStep.updateTime}}</p>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>
<script>
import StateOrder from './components/stateOrder.vue'
import { WaybillDetail, validata } from '@/model/waybillDetail.js'
import { toQueryWaybillTraceAndWaybill } from 'api/user.js'
import LocalStorage from '../../model/localStorage.js'
import { Toast } from 'vant'
export default {
  name: 'OrderDetails',
  components: {
    StateOrder
  },
  data() {
    return {
      title: 'Order Details',
      icon_shaixuan: require('assets/image/btn_scan.png'),
      traceList: {},
      traceContent: [],
      firstStep: {},
      finalStep: {},
      step: ''
    }
  },
  created() {
    //如果页面刷新返回上一步
    let pageId = this.$route.params.id
    let waybill = this.$route.params.waybillNumber || null
    // alert(waybill)
    this.search(waybill)
    if (pageId == undefined) {
      this.$router.go(-1)
    }
  },
  methods: {
    goBack() {
      this.$router.replace({
        path: '/myOrder'
      })
    },
    search(num) {
      let waybill = num

      let phone = LocalStorage.get('token') ? JSON.parse(this.$store.state.app.userInfo).phone : 'null'
      let waybillInstance = new WaybillDetail(phone, waybill)
      console.log(waybillInstance)
      if (validata(waybillInstance, WaybillDetail)) {
        let data = waybillInstance._getData()
        toQueryWaybillTraceAndWaybill(data)
          .then(res => {
            console.log(res.data.trace)
            let length = res.data.trace.expressTraceList.length
            this.traceList = res.data.trace
            this.traceContent = res.data.trace.expressTraceList.slice(1, length - 1)
            console.log(this.traceContent)
            this.step = 1
            this.firstStep = res.data.trace.expressTraceList[0]
            this.finalStep = res.data.trace.expressTraceList[length - 1]
          })
          .catch(err => {
            Toast.fail({
              message: err
            })
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import './orderDetails.scss';
</style>